<template>
  <!-- :title="
      (disabled ? '编辑' : '添加') +
      (form.type == 0 ? '目录' : form.type == 1 ? '菜单' : '按钮')
    " -->
  <el-dialog
    append-to-body
    :close-on-click-modal="false"
    :before-close="closeHide"
    :visible.sync="dialogShow"
    :title="
      (disabled ? $t('common.common20') : $t('common.common18')) +
      (form.type == 0
        ? $t('menu.menu5')
        : form.type == 1
        ? $t('menu.menu6')
        : $t('menu.menu7'))
    "
    width="650px"
  >
    <el-form
      ref="form"
      :inline="true"
      :model="form"
      :rules="rules"
      size="small"
      label-width="130px"
    >
      <!-- 菜单类型 -->
      <el-form-item :label="$t('menu.menu8')" prop="type">
        <el-radio-group
          v-model="form.type"
          size="mini"
          style="width: 210px"
          :disabled="form.type == 0 || disabled ? true : false"
        >
          <!-- 目录 -->
          <el-radio-button
            label="0"
            :disabled="form.type !== 0 ? true : false"
            >{{ $t("menu.menu5") }}</el-radio-button
          >
          <!-- 菜单 -->
          <el-radio-button label="1">{{ $t("menu.menu6") }}</el-radio-button>
          <el-radio-button label="2">{{ $t("menu.menu7") }}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <!-- 菜单图标 -->
      <el-form-item
        v-show="form.type.toString() !== '2'"
        :label="$t('menu.menu9')"
        prop="icon"
      >
        <el-popover
          placement="bottom-start"
          width="420"
          trigger="click"
          @show="$refs['iconSelect'].reset()"
        >
          <IconSelect ref="iconSelect" @selected="selected" />
          <!-- 点击选择图标 -->
          <el-input
            slot="reference"
            v-model="form.icon"
            style="width: 420px"
            :placeholder="$t('menu.menu10')"
            readonly
          >
            <svg-icon
              v-if="form.icon"
              slot="prefix"
              :icon-class="form.icon"
              class="el-input__icon"
              style="height: 32px; width: 16px"
            />
            <i v-else slot="prefix" class="el-icon-search el-input__icon" />
          </el-input>
        </el-popover>
      </el-form-item>
      <!--
        <el-form-item v-show="(form.type).toString() !== '2'" label="外链菜单" prop="iframe">
          <el-radio-group v-model="form.iframe" size="mini">
            <el-radio-button label="true">是</el-radio-button>
            <el-radio-button label="false">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
        -->
      <!-- 菜单缓存 -->
      <el-form-item
        v-show="form.type.toString() === '1'"
        :label="$t('menu.menu11')"
        prop="keepalive"
      >
        <!-- 是：menu12  否 menu13 -->
        <el-radio-group v-model="form.keepalive" size="mini">
          <el-radio-button label="true">{{
            $t("menu.menu12")
          }}</el-radio-button>
          <el-radio-button label="false">{{
            $t("menu.menu13")
          }}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <!-- 菜单可见 -->
      <el-form-item
        v-show="form.type.toString() !== '2'"
        :label="$t('menu.menu14')"
        prop="hidden"
      >
        <el-radio-group v-model="form.hidden" size="mini">
          <el-radio-button label="false">{{
            $t("menu.menu12")
          }}</el-radio-button>
          <el-radio-button label="true">{{
            $t("menu.menu13")
          }}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <!-- 面包屑是否可点击 -->
      <el-form-item
        :label="$t('menu.menu15')"
        prop="redirect"
        v-show="form.type.toString() == '0'"
      >
        <!-- 面包屑导航中不可被点击 -->
        <el-input
          v-model="form.redirect"
          :placeholder="'noredirect ' + $t('menu.menu16')"
          style="width: 420px"
        />
      </el-form-item>
      <!-- 面包屑是否显示 -->
      <el-form-item
        :label="$t('menu.menu17')"
        prop="breadcrumb"
        v-show="form.type.toString() == '0'"
      >
        <el-radio-group v-model="form.breadcrumb" size="mini">
          <el-radio-button label="true">{{
            $t("menu.menu12")
          }}</el-radio-button>
          <el-radio-button label="false">{{
            $t("menu.menu13")
          }}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <!-- 菜单标题(中英) -->
      <div v-if="form.type.toString() !== '2'">
        <el-form-item
          :label="$t('menu.menu2') + '(' + $t('openCheck.openCheck12') + ')'"
          prop="permission_name"
        >
          <el-input
            v-model="form.permission_name"
            style="width: 420px"
            :placeholder="
              $t('menu.menu2') + '(' + $t('openCheck.openCheck12') + ')'
            "
          />
        </el-form-item>
        <el-form-item
          :label="$t('menu.menu2') + '(' + $t('openCheck.openCheck13') + ')'"
          prop="permission_name_en"
        >
          <el-input
            v-model="form.permission_name_en"
            style="width: 420px"
            :placeholder="
              $t('menu.menu2') + '(' + $t('openCheck.openCheck13') + ')'
            "
          />
        </el-form-item>
        <el-form-item
          :label="$t('menu.menu2') + '(' + $t('openCheck.openCheck26') + ')'"
          prop="permission_name_en"
        >
          <el-input
            v-model="form.permission_name_tc"
            style="width: 420px"
            :placeholder="
              $t('menu.menu2') + '(' + $t('openCheck.openCheck26') + ')'
            "
          />
        </el-form-item>
      </div>
      <!-- 按钮名称(中英) -->
      <div v-if="form.type.toString() === '2'">
        <el-form-item
          :label="$t('menu.menu18') + '(' + $t('openCheck.openCheck12') + ')'"
          prop="permission_name"
        >
          <el-input
            v-model="form.permission_name"
            :placeholder="
              $t('menu.menu18') + '(' + $t('openCheck.openCheck12') + ')'
            "
            style="width: 420px"
          />
        </el-form-item>
        <el-form-item
          :label="$t('menu.menu18') + '(' + $t('openCheck.openCheck13') + ')'"
          prop="permission_name"
        >
          <el-input
            v-model="form.permission_name_en"
            :placeholder="
              $t('menu.menu18') + '(' + $t('openCheck.openCheck13') + ')'
            "
            style="width: 420px"
          />
        </el-form-item>
        <el-form-item
          :label="$t('menu.menu18') + '(' + $t('openCheck.openCheck26') + ')'"
          prop="permission_name"
        >
          <el-input
            v-model="form.permission_name_tc"
            :placeholder="
              $t('menu.menu18') + '(' + $t('openCheck.openCheck26') + ')'
            "
            style="width: 420px"
          />
        </el-form-item>
      </div>

      <!-- 权限标识 -->
      <el-form-item
        v-show="form.type.toString() !== '0'"
        :label="$t('menu.menu3')"
        prop="permission_mark"
      >
        <el-input
          v-model="form.permission_mark"
          :placeholder="$t('menu.menu3')"
          style="width: 420px"
        />
      </el-form-item>
      <!-- 路由地址 -->
      <el-form-item
        v-if="form.type.toString() !== '2'"
        :label="$t('menu.menu19')"
        prop="path"
      >
        <el-input
          v-model="form.path"
          :placeholder="$t('menu.menu19')"
          style="width: 420px"
        />
      </el-form-item>
      <!-- 菜单排序 -->
      <el-form-item :label="$t('menu.menu20')" prop="sort">
        <el-input-number
          v-model.number="form.sort"
          :min="0"
          :max="9999"
          controls-position="right"
          style="width: 178px"
        />
      </el-form-item>
      <!-- 组件名称 -->
      <el-form-item
        v-show="form.type.toString() === '1'"
        :label="$t('menu.menu21')"
        prop="component"
      >
        <!-- 匹配组件内Name字段 -->
        <el-input
          v-model="form.component"
          style="width: 420px"
          :placeholder="$t('menu.menu22')"
        />
      </el-form-item>
      <!-- 组件路径 -->
      <el-form-item
        v-show="form.type.toString() === '1'"
        :label="$t('menu.menu4')"
        prop="route"
      >
        <el-input
          v-model="form.route"
          style="width: 420px"
          :placeholder="$t('menu.menu4')"
        />
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
      v-if="
        (checkPermission(['permissions@update']) && form.id) ||
        (checkPermission(['permissions@save']) && !form.id) ||
        (checkPermission(['permissions@save']) & !form.id && disabled)
      "
    >
      <el-button type="text" @click="closeHide">{{
        $t("common.common1")
      }}</el-button>
      <el-button :loading="loading" type="primary" @click="submitCU">{{
        $t("common.common2")
      }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
import IconSelect from "@/components/IconSelect";
import { editListInfo, saveListInfo, add } from "@/api/system/menu";
export default {
  components: {
    IconSelect,
  },
  data() {
    return {
      dialogShow: false,
      form: {
        type: 0,
        keepalive: false,
        hidden: false,
        permission_name: "",
        permission_name_en: "",
        permission_name_tc:"",
        permission_mark: "",
        path: "",

        parent_id: 0,
        level: 0,
        icon: "",
        sort: 0,
        redirect: "",
        component: "",
      },
      rules: {},
      loading: false,
      disabled: false,
      status: "",
    };
  },
  mounted() {},
  methods: {
    closeHide() {
      this.dialogShow = false;
      this.$refs["form"].resetFields();
      this.form = {
        type: 0,
        keepalive: false,
        hidden: false,
        permission_name: "",
        permission_name_en: "",
        permission_name_tc:"",
        permission_mark: "",
        path: "",
        parent_id: 0,
        level: 0,
        icon: "",
        sort: 0,
        redirect: "",
        component: "",
      };
    },
    submitCU() {
      this.loading = true;
      if (this.form.id && this.status == "edit") {
        this.saveListInfo(this.form.id, this.form);
      } else {
        this.addList(this.form);
      }
    },
    init(id, type, status) {
      this.dialogShow = true;
      type = type || 0;
      this.form.type = type;
      if (type == "0") {
        this.form.component = "layout";
        this.form.redirect = "noredirect";
      } else {
        this.form.parent_id = id;
      }
      this.disabled = false;
      this.status = "";
      if (id && status == "edit") {
        this.status = "edit";
        this.disabled = true;
        this.editListInfo(id);
      }
    },
    editListInfo(id) {
      editListInfo(id).then((res) => {
        this.form = Object.assign({}, this.form, res.data);
      });
    },
    saveListInfo(id, data) {
      var _this = this;
      saveListInfo(id, data).then((res) => {
        this.loading = false;
        if (res.code == 10000) {
          this.closeHide();
          _this.$parent.$parent.getList();
          this.$parent.$parent.meunList();
        }
      });
    },
    addList(data) {
      add(data).then((res) => {
        this.loading = false;
        if (res.code == 10000) {
          this.closeHide();
          this.$parent.$parent.getList();
          this.$parent.$parent.meunList();
        }
      });
    },
    // 选中图标
    selected(name) {
      this.form.icon = name;
    },
  },
};
</script>